<template>
    <main-wrap>
        <template v-slot:header>
            <Header title="消息详情"/>
        </template>
        <div class="dtWrap">
            <h1>{{nDetail.title}}</h1>
            <!-- <div class="introduce">
                {{nDetail.introduce}}
            </div> -->
            <div class="time">{{nDetail.createTime}}</div>
            <div class="content" v-html="nDetail.content">
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Header from '@/components/header.vue'
export default {
    components:{
        mainWrap,
        Header
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            id:'',
            nDetail:''
        })

        onMounted(()=>{
            state.id = route.params.id
            store.dispatch('arApi/get_notice_detail',state.id).then(res=>{
                state.nDetail = res.data || {}
            })
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .dtWrap{
        padding: 30px 40px;
        h1{
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }
        .introduce{
            font-size: 26px;
            color: rgba(255, 255, 255, 0.5);
            padding: 20px 0 0 0;
            line-height: 46px;
            height: 100px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .time{
            font-size: 24px;
            color: rgba(255, 255, 255, 0.5);
            padding: 20px 0 30px 0; 
            border-bottom:1px solid rgba(255, 255, 255, 0.2);
        }
        .content{
            padding: 30px 0 0 0 ;
            font-size: 28px;
            line-height: 46px;
        }
    }
</style>